<template>
  <div class="learner">
    <van-nav-bar title="课程详情" left-arrow @click-left="onClickLeft" />
    <div class="main">
      <div id="mse"></div>
    </div>
    <div id="xuexi-tit">
      <p>1.1跟xxx学前端 导学课【购买前必读,<br />免费试读】</p>
      <h5>播放10303次</h5>
    </div>
    <div id="share">
      <div id="share-box">
        <van-icon name="share" class="share-ico" color="#79ad70" />
        <div is-link @click="showPopup">分享</div>
      </div>
      <div id="share-box">
        <van-icon name="star" class="share-ico" color="#e2b61a" />
        <p>收藏</p>
      </div>
      <div id="share-box">
        <van-icon name="map-marked" class="share-ico" color="red" />
        <p>探索</p>
      </div>
    </div>
    <van-popup
      v-model="show"
      closeable
      close-icon="close"
      position="bottom"
      :style="{ height: '16%' }"
    >
      <div id="icon-chatbox">
        <div class="icon-wechat">
          <van-icon class="icon-chat" color="#26da6f" name="wechat" />
          <p>微信</p>
        </div>
        <div class="icon-wechat">
          <van-icon class="icon-chat" color="#5762d5" name="alipay" />
          <p>支付宝</p>
        </div>
        <div class="icon-wechat">
          <van-icon class="icon-chat" color="#ff7043" name="chat" />
          <p>其他社交</p>
        </div>
      </div>
    </van-popup>
    <div id="xuexi_cour" data-id="666">
      <div id="xuexicourse-tit">
        <p>共xx节课程</p>
        <span data-id="669">课程详情></span>
      </div>
      <!-- <van-popup v-model="show" position="right" :style="{ height: '30%' }" /> -->
    </div>
    <div class="Set_number">
      <van-swipe
        :loop="false"
        :show-indicators="false"
        :width="190"
        :height="100"
      >
        <van-swipe-item class="set-number" data-id="999">
          <div id="set-num">
            <i>视频</i>
            <b>可试看</b>
          </div>
          <p>1.1 跟小葵花妈妈学前端,<br />加油👉</p>
        </van-swipe-item>
        <van-swipe-item class="set-number">
          <div id="set-num">
            <i>视频</i>
            <b>可试看</b>
          </div>
          <p>1.2 跟小葵花妈妈学前端,<br />加油👉</p>
        </van-swipe-item>
        <van-swipe-item class="set-number">
          <div id="set-num">
            <i>视频</i>
            <b>可试看</b>
          </div>
          <p>1.3 跟小葵花妈妈学前端,<br />加油👉</p>
        </van-swipe-item>
        <van-swipe-item class="set-number">
          <div id="set-num">
            <i>视频</i>
            <b>可试看</b>
          </div>
          <p>1.4 跟小葵花妈妈学前端,<br />加油👉</p>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script>
import Player from "xgplayer";

export default {
  data() {
    return {
      show: false,
    };
  },
  methods: {
    onClickLeft() {
      this.$store.commit("tabShow");
      this.$router.go(-1);
    },
    showPopup() {
      this.show = true;
    },
  },
  created() {
    console.log(22);
    this.$store.commit("tabHide");
  },
  mounted() {
    //用的西瓜视频插件,url以下全是配置可自行修改https://v2.h5player.bytedance.com/官网
    let player = new Player({
      id: "mse",
      url: "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4",
      playsinline: true,
      closeVideoClick: true,
      enableVideoDbltouch: true,
      fitVideoSize: "auto",
      whitelist: [""],
      // controlPlugins: [fullscreen],
      keyShortcut: "on",
      width: "100%",
      height: 200,
      pip: true,
      loop: true,
      playbackRate: [0.5, 0.75, 1, 1.5, 2],
      download: false,
      volume: 0.6,
      thumbnail: {
        pic_num: 44,
        width: 160,
        height: 90,
        col: 10,
        row: 10,
        urls: [
          "../../assets/image/kuihua.png",
          "../../assets/image/kuihua.png",
        ],
        isShowCoverPreview: true,
      },
      miniplayer: false,
      miniplayerConfig: {
        bottom: 200,
        right: 0,
        width: 320,
        height: 180,
      },
      danmu: {
        panel: false, //弹幕面板
        comments: [
          //弹幕数组
          {
            duration: 15000, //弹幕持续显示时间,毫秒(最低为5000毫秒)
            id: "1", //弹幕id，需唯一
            start: 3000, //弹幕出现时间，毫秒
            prior: true, //该条弹幕优先显示，默认false
            color: true, //该条弹幕为彩色弹幕，默认false
            txt: "学东西来小葵花就对了", //弹幕文字内容
            style: {
              //弹幕自定义样式
              color: "#ff9500",
              fontSize: "20px",
              border: "solid 1px #ff9500",
              borderRadius: "50px",
              padding: "5px 11px",
              backgroundColor: "rgba(255, 255, 255, 0.1)",
            },
            mode: "top",
          },
          {
            duration: 15000,
            id: "3",
            start: 4000,
            txt: "孩子发烧老不好",
            mode: "bottom",
          },
          {
            duration: 15000,
            color: true,
            id: "3",
            start: 4000,
            txt: "多半是废惹",
            mode: "scroll",
          },
        ],
        area: {
          start: 0, //区域顶部到播放器顶部所占播放器高度的比例
          end: 1, //区域底部到播放器顶部所占播放器高度的比例
        },
      },
    });
    player.emit("resourceReady", []);
  },
};
</script>

<style lang="scss" scoped>
.learner {
  background-color: #f2f4f8;
  #xuexi-tit {
    background: #fff;
    width: 100%;
    text-align: center;
    padding-top: 50px;
    p {
      font-size: 19px;
    }
    h5 {
      color: #999;
      margin-top: 10px;
      padding-bottom: 20px;
    }
  }
  #share {
    height: 50px;
    width: 100%;
    background: #fff;
    display: flex;
    justify-content: space-around;
    margin-top: 2px;
    // opacity: 0.8;
    #share-box {
      display: flex;
      font-size: 20px;
      margin-top: 10px;
    }
  }
  #icon-chatbox {
    display: flex;
    justify-content: space-around;
    .icon-chat {
      margin-top: 15px;
      font-size: 60px;
    }
  }
  #xuexi_cour {
    width: 100%;
    height: 30px;
    #xuexicourse-tit {
      height: 50px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 0 10px 0 10px;
      margin-top: 10px;
    }
  }
  .Set_number {
    background: #fff;
    // background: #fff;
    margin-top: 5px;
    padding-bottom: 65px;
    padding-right: -10px;
    .set-number {
      margin-right: 10px;
      padding: 5px 5px;
      background: #fff;
      border: #cecece 1px solid;
      border-radius: 5px;
      box-shadow: 5px 5px 7px #999;
      p {
        margin-top: 10px;
      }
      #set-num {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        i {
          height: 20px;
          background: #79ad70;
          color: #fff;
          font-style: normal;
        }
        b {
          font-weight: normal;
          color: #999;
        }
      }
    }
  }
}
</style>
